<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片懒加载</title>
  <style>
    .img {
      width: 220px;
      height: 220px;
      background-color: #ccc;
      margin-bottom: 40px;
      margin-left: 50px;
    }

    .pic {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <!-- 当 img 元素到可视区的时候再加载 -->
  <img class="pic" alt="加载中..."
    data-src="https://img10.360buyimg.com/n7/jfs/t1/183679/11/2189/143829/6091f5d8E933e7ad1/e3e2001666f2ce7b.jpg" />
  <img class="pic" alt="加载中..."
    data-src="https://img12.360buyimg.com/n7/jfs/t1/192682/11/617/163213/608b887aEddbbbee3/9570466a90d02f79.jpg" />
  <img class="pic" alt="加载中..."
    data-src="https://img14.360buyimg.com/n7/jfs/t1/156161/35/18802/268242/60641d96Eca3dee7f/4a32070a19deb4f5.jpg" />
  <img class="pic" alt="加载中..."
    data-src="https://img10.360buyimg.com/n7/jfs/t1/130179/12/9273/167054/5f5468edE9d4ecd9c/39f7520d9f76b695.jpg" />
  <img class="pic" alt="加载中..."
    data-src="https://img14.360buyimg.com/n7/jfs/t1/100888/13/13132/105320/5e5533c6Ea8daa487/f95d7ba4da5581c5.jpg" />
  <img class="pic" alt="加载中..."
    data-src="https://img10.360buyimg.com/n7/jfs/t1/173986/31/8862/291849/6098d6d0E26c55012/c2144f6e074556d2.jpg" />
  <img class="pic" alt="加载中..."
    data-src="https://img10.360buyimg.com/n7/jfs/t1/110754/4/12605/101916/5ee43244E6fbf9433/c42fb5e3f9558a59.jpg" />
  <img class="pic" alt="加载中..."
    data-src="https://img10.360buyimg.com/n7/jfs/t1/148370/31/1084/45848/5eedc2eeEfdc2cd46/f3c3a6f0bd7998be.jpg" />
  <img class="pic" alt="加载中..."
    data-src="https://img10.360buyimg.com/n7/jfs/t1/165930/8/7273/171076/602fd5dfE65a52775/ee27074b7037c020.jpg" />
  <img class="pic" alt="加载中..."
    data-src="https://img13.360buyimg.com/n7/jfs/t1/190093/28/117/193777/60867822Ea949fbec/6fe51b122d0fdc5a.jpg" />
  <img class="pic" alt="加载中..."
    data-src="https://img14.360buyimg.com/n7/jfs/t1/119501/15/6768/115886/5eca6c36Eb3541dc9/2f4534173878a23c.jpg" />
  <script>
    // onload是等所有的资源文件加载完毕以后再绑定事件
    window.onload = function () {
      // 获取图片列表，即img标签列表
      var imgs = document.querySelectorAll('img');
      // 获取到浏览器顶部的距离
      function getTop(e) {
        return e.offsetTop;
      }
      // 懒加载实现
      function lazyload(imgs) {
        // 可视区域高度
        var h = window.innerHeight;
        //滚动区域高度
        var s = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = 0; i < imgs.length; i++) {
          //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
          if ((h + s) > getTop(imgs[i])) {
            // 真实情况是页面开始有2秒空白，所以使用setTimeout定时2s
            (function (i) {
              setTimeout(function () {
                // 不加立即执行函数i会等于9
                // 隐形加载图片或其他资源，
                //创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
                var temp = new Image();
                temp.src = imgs[i].getAttribute('data-src');//只会请求一次
                // onload判断图片加载完毕，真是图片加载完毕，再赋值给dom节点
                temp.onload = function () {
                  // 获取自定义属性data-src，用真图片替换假图片
                  imgs[i].src = imgs[i].getAttribute('data-src')
                }
              }, 2000)
            })(i)
          }
        }
      }
      lazyload(imgs)
      // 滚屏函数
      window.onscroll = function () {
        lazyload(imgs);
      }
    }
  </script>
</body>

</html>